<template>
  <div class="layout">
    <Layout>
      <app-header :menus="this.$store.state.menus"></app-header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff', width:'180px', maxWidth:'180px', minWidth:'180px'}">
          <app-menu :menus="this.$store.state.menus"></app-menu>
        </Sider>
        <Layout :style="{marginLeft: '180px'}">
          <app-breadcrumb :menus="this.$store.state.menus"></app-breadcrumb>
          <Content :style="{background: '#fff'}">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  import AppHeader from './layout/Header.vue'
  import AppMenu from './layout/Sider.vue'
  import AppBreadcrumb from './layout/Breadcrumb.vue'

  export default {
    components: {
      AppHeader,
      AppMenu,
      AppBreadcrumb
    },
    data () {
      return {}
    },
    mounted () {
    },
    methods: {}
  }
</script>
